<template>
    <div :class="`tech-label-line ${mode}`">
        <div class="label-title title-color">{{ title }}<slot name="title"></slot></div>
        <div class="label-price title-color" v-if="isPrice" :style="`${isTheme && value ? fontColor : ''}`">
            <span class="label-prefix">{{ prefix }}</span>{{ isNegative ? '-' : '' }}<span class="label">￥</span>{{ value }}
            <slot name="value"></slot>
        </div>
        <div v-else class="label-value-container" @click="clickAction">
            <span class="label-value tip-color" :style="`${isTheme && value ? fontColor : ''}`">{{ value ? value : placeholder }}</span>
            <MiniIcon v-if="isLink" name="right" :size="16" :mode="mode" :styleMode="styleMode" theme="#7D7D83" />
        </div>
    </div>
</template>

<script>
import { MiniIcon } from '@components/base';
import ModeMixin from '@common/mixin';
export default {
    name: 'LabelLine', // 单行数据
    mixins: [ModeMixin],
    components: {
        MiniIcon,
    },
    props: {
        title: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: '',
        },
        value: {
            type: [String, Number],
            default: '',
        },
        isPrice: {
            type: Boolean,
            default: false,
        },
        isNegative: {
            type: Boolean,
            default: false,
        },
        isTheme: {
            type: Boolean,
            default: false,
        },
        isLink: {
            type: Boolean,
            default: false,
        },
        prefix: {
            type: String,
            default: '',
        },
    },
    methods: {
        clickAction() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="less">
.tech-label-line {
    height: 50px;
    width: 100%;
    .flex();
    align-items: center;
    justify-content: space-between;
    .mode-white();
    .label-title {
        .font-size();
        .flex();
        align-items: center;
    }
    .label-price {
        .flex();
        align-items: center;
        .label-prefix {
            font-size: @font-size-sm;
            .m-r(@gap);
        }
        font-size: @font-size;
        font-family: @font-family-number;
        .label {
            .m-r(-3);
        }
    }
    .label-value-container {
        .flex();
        align-items: center;
        justify-content: flex-end;
        font-weight: 400;
        .label-value {
            .font-size();
            color: @tip-color;
            font-family: @font-family-number;
        }
    }
}
</style>
